<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Card, Form, Select, DatePicker, Button, message, Input, Avatar, Rate, InputNumber } from 'ant-design-vue';
import { getPhotographerPage, type PhotographerApi } from '#/api/wedding/photographer';
import { createPhotographyOrder } from '#/api/wedding/photographyorder';

const formRef = ref();
const loading = ref(false);
const photographers = ref<PhotographerApi.Photographer[]>([]);
const formData = ref({
  photographerCode: undefined,
  customerId: '',
  shootingTime: '',
  shootingLocation: '',
  photoCount: 100,
  retouchCount: 30,
});

const loadPhotographers = async () => {
  loading.value = true;
  try {
    const result = await getPhotographerPage({ pageNo: 1, pageSize: 100 });
    photographers.value = result.list || [];
  } finally {
    loading.value = false;
  }
};

const handleSubmit = async () => {
  await formRef.value?.validate();
  loading.value = true;
  try {
    await createPhotographyOrder(formData.value as any);
    message.success('预约成功');
    formRef.value?.resetFields();
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadPhotographers();
});
</script>

<template>
  <div>
    <div class="grid grid-cols-4 gap-4 mb-6">
      <Card 
        v-for="photographer in photographers" 
        :key="photographer.id"
        hoverable
      >
        <div class="text-center">
          <Avatar :src="photographer.avatar" :size="80" class="mb-2">
            {{ photographer.photographerName?.substring(0, 1) }}
          </Avatar>
          <div class="font-medium">{{ photographer.photographerName }}</div>
          <Rate :value="photographer.rating" disabled class="text-xs my-1" />
          <div class="text-sm text-gray-500">从业{{ photographer.workYears }}年</div>
          <div class="text-red-500 font-bold mt-2">¥{{ photographer.servicePrice }}</div>
        </div>
      </Card>
    </div>

    <Card title="快速预约">
      <Form ref="formRef" :model="formData" layout="vertical">
        <Form.Item label="选择摄影师" name="photographerCode" :rules="[{ required: true }]">
          <Select v-model:value="formData.photographerCode" placeholder="请选择">
            <Select.Option v-for="photographer in photographers" :key="photographer.photographerCode" :value="photographer.photographerCode">
              {{ photographer.photographerName }}
            </Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="拍摄时间" name="shootingTime" :rules="[{ required: true }]">
          <DatePicker v-model:value="formData.shootingTime" show-time class="w-full" />
        </Form.Item>
        <Form.Item label="拍摄地点" name="shootingLocation" :rules="[{ required: true }]">
          <Input v-model:value="formData.shootingLocation" placeholder="请输入拍摄地点" />
        </Form.Item>
        <Form.Item label="拍摄数量" name="photoCount">
          <InputNumber v-model:value="formData.photoCount" :min="1" class="w-full" />
        </Form.Item>
        <Form.Item label="精修数量" name="retouchCount">
          <InputNumber v-model:value="formData.retouchCount" :min="1" class="w-full" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" @click="handleSubmit" :loading="loading">提交预约</Button>
        </Form.Item>
      </Form>
    </Card>
  </div>
</template>

